<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HLS测试页面</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .video-container {
            margin: 20px 0;
            text-align: center;
        }
        video {
            max-width: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        .controls {
            margin: 20px 0;
            text-align: center;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background: #0056b3;
        }
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .status {
            margin: 20px 0;
            padding: 15px;
            border-radius: 5px;
            background: #f8f9fa;
            border-left: 4px solid #007bff;
        }
        .error {
            background: #f8d7da;
            border-left-color: #dc3545;
            color: #721c24;
        }
        .success {
            background: #d4edda;
            border-left-color: #28a745;
            color: #155724;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HLS视频流测试页面</h1>
        
        <div class="status" id="status">
            正在初始化播放器...
        </div>
        
        <div class="video-container">
            <video id="video" controls width="640" height="360">
                您的浏览器不支持视频播放
            </video>
        </div>
        
        <div class="controls">
            <button onclick="playVideo()" id="playBtn">播放</button>
            <button onclick="pauseVideo()" id="pauseBtn">暂停</button>
            <button onclick="reloadVideo()" id="reloadBtn">重新加载</button>
        </button>
        
        <div class="status" id="info">
            <strong>播放信息:</strong><br>
            <span id="videoInfo">等待加载...</span>
        </div>
    </div>

    <script>
        const video = document.getElementById('video');
        const status = document.getElementById('status');
        const info = document.getElementById('info');
        const videoInfo = document.getElementById('videoInfo');
        let hls = null;

        function updateStatus(message, type = 'info') {
            status.textContent = message;
            status.className = 'status ' + type;
        }

        function updateInfo(message) {
            videoInfo.textContent = message;
        }

        function initHLS() {
            if (Hls.isSupported()) {
                hls = new Hls({
                    debug: false,
                    enableWorker: true,
                    lowLatencyMode: true
                });

                hls.loadSource('/hls/stream.m3u8');
                hls.attachMedia(video);

                hls.on(Hls.Events.MANIFEST_PARSED, function() {
                    updateStatus('HLS流加载成功！', 'success');
                    updateInfo('视频已就绪，可以播放');
                    video.play().catch(e => {
                        console.log('自动播放被阻止:', e);
                        updateInfo('点击播放按钮开始播放');
                    });
                });

                hls.on(Hls.Events.ERROR, function(event, data) {
                    console.error('HLS错误:', data);
                    updateStatus('HLS错误: ' + data.details, 'error');
                    updateInfo('播放出错，请检查流状态');
                });

                hls.on(Hls.Events.BUFFER_STALLED, function() {
                    updateInfo('缓冲中...');
                });

                hls.on(Hls.Events.BUFFER_LOADED, function() {
                    updateInfo('缓冲完成');
                });

                updateStatus('正在加载HLS流...', 'info');
            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                // Safari原生支持HLS
                video.src = '/hls/stream.m3u8';
                video.addEventListener('loadedmetadata', function() {
                    updateStatus('HLS流加载成功！', 'success');
                    updateInfo('视频已就绪，可以播放');
                });
                video.addEventListener('error', function() {
                    updateStatus('视频加载失败', 'error');
                    updateInfo('请检查流状态');
                });
            } else {
                updateStatus('您的浏览器不支持HLS播放', 'error');
                updateInfo('请使用Chrome、Firefox或Safari浏览器');
            }
        }

        function playVideo() {
            if (video.readyState >= 2) {
                video.play();
                updateInfo('正在播放');
            } else {
                updateInfo('视频未就绪，请等待加载完成');
            }
        }

        function pauseVideo() {
            video.pause();
            updateInfo('已暂停');
        }

        function reloadVideo() {
            if (hls) {
                hls.destroy();
            }
            video.src = '';
            updateStatus('正在重新加载...', 'info');
            updateInfo('等待加载...');
            setTimeout(initHLS, 1000);
        }

        // 页面加载完成后初始化
        window.addEventListener('load', function() {
            updateStatus('正在初始化播放器...', 'info');
            initHLS();
        });

        // 视频事件监听
        video.addEventListener('play', function() {
            updateInfo('正在播放');
        });

        video.addEventListener('pause', function() {
            updateInfo('已暂停');
        });

        video.addEventListener('waiting', function() {
            updateInfo('缓冲中...');
        });

        video.addEventListener('canplay', function() {
            updateInfo('可以播放');
        });

        video.addEventListener('error', function(e) {
            updateStatus('视频播放错误', 'error');
            updateInfo('播放出错，请检查流状态');
        });
    </script>
</body>
</html>
